<template>
    <view class="container" :class="{ 'plus-container': getSupplierMode() == 0 && isUsePlus }" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <scroll-view scroll-y :style="{ height: listHeight }" class="index-page-box">
            <div v-for="(item, index) in widgets" :key="item.Id">
                <template v-if="item.Widget == 'widget-usercenter'">
                    <!-- 个人信息 -->
                    <view class="pure-top"></view>
                    <view class="main">
                        <view class="account-info">
                            <view class="account-info-avatar">
                                <image class="avatar-img" mode="aspectFill"
                                    :src="easyGetUserImgUrl(userInfo.HeadPortrait)">
                                </image>
                            </view>
                            <view class="account-info-user">
                                <view class="account-info-user-top">
                                    <text class="user-name text-show-line-2">{{ userInfo.NickName }}</text>
                                    <view class="vip-lv-box"
                                        v-if="getSupplierMode() == 0 && isUsePlus && userInfo.IsVip">
                                        <image class="vip-lv-img" src="/static/img/vip_1.png"></image>
                                        <text class="text">{{ userInfo.VipTypeName }}</text>
                                        <view class="vip-bg"></view>
                                    </view>
                                </view>
                                <text class="user-location">会员号：{{ userInfo.CardNumber }}</text>
                                <view class="can-use-time" v-if="getSupplierMode() == 0 && isUsePlus && userInfo.IsVip"
                                    @click="easyGoTo('/pages_me/packet/plus/history')">
                                    <text>{{ userInfo.ExpirationTime.split(" ")[0] }} 到期 </text><uni-icons
                                        class="right-icon" type="arrowright" size="24"></uni-icons>
                                </view>
                            </view>
                            <view class="icon_edit icon-account" v-if="cutList.length > 0" @click="cutAccountFn()">
                                <iconsfont customIcons="icon-qiehuanyonghu" color="#ffffff" size="36"></iconsfont>
                            </view>
                            <view class="icon_edit" @click="goUrl('/pages_me/packet/setting/index')"
                                @longpress="longpress">
                                <iconsfont customIcons="icon-shezhi1" color="#ffffff" size="36"></iconsfont>
                            </view>
                        </view>
                        <view class="vip" v-if="getSupplierMode() == 0 && isUsePlus"
                            @click="goUrl('/pages_me/packet/plus/index')">
                            <view class="vip-main">
                                <image class="vip-icon" src="/static/img/vip_1.png"></image>
                                <text class="vip-tip-text">开通PLUS会员，享更多优惠</text>
                                <text>去开通</text>
                                <uni-icons class="right-icon" type="arrowright" size="24"></uni-icons>
                            </view>
                            <view class="bg"></view>
                        </view>
                        <view class="balance">
                            <view class="balance-item" v-if="item.Setting.YueVisible == 'on'"
                                @click="goUrl('/pages_me/packet/finance/index')">
                                <text class="value">{{ balance.toFixed(2) }}</text>
                                <text class="label">我的余额</text>
                            </view>
                            <view class="balance-item" v-if="item.Setting.JifenVisible == 'on'"
                                @click="goUrl('/pages_me/packet/finance/index')">
                                <text class="value">{{ Integral }}</text>
                                <text class="label">我的积分</text>
                            </view>
                            <view class="balance-item coupon" v-if="item.Setting.KabaoVisible == 'on'"
                                @click="goUrl('/pages_me/packet/coupon/index')">
                                <text class="value">{{ couponNum }}</text>
                                <text class="label">我的卡券</text>
                            </view>
                        </view>
                        <view class="membership" @click="goUpgrade()" v-if="userInfo.UpgradeTxt">
                            <image src="@/static/img/membershipbg.png" class="membershipbg"></image>
                            <view class="membership_main">
                                <view class="membership_left">
                                    <view class="flex-v-c">
                                        <image src="@/static/img/membervip.png"></image>
                                        <view class="main_name">{{ userInfo.GradeName }}</view>
                                    </view>
                                    <view class="main-desc">{{ userInfo.UpgradeTxt }}</view>
                                </view>
                                <view class="membership_right">
                                    <view>立即申请</view>
                                    <view class="button-go">
                                        <view></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <!-- <template v-if="item.Widget == 'widget-space'">
                    <div style="height: 10px;"></div>
                </template> -->
                <template v-if="item.Widget == 'widget-order'">
                    <!-- 我的订单 -->
                    <view class="nav" v-if="getAppSet().userCenterMenu.myOrder">
                        <view class="cell-normal" @click="goMyOrder('-1')">
                            <text class="cell-text">我的订单</text>
                            <view class="flex-start">
                                <text style="color: #999">全部订单</text>
                                <uni-icons class="cell-icon" type="arrowright" color="#999"></uni-icons>
                            </view>
                        </view>
                        <view class="menu-items">
                            <view class="menu" v-for="(mItem, mIndex) in items" :key="mItem.type"
                                @click="goMyOrder(mItem.state)">
                                <view class="menu-box">
                                    <iconsfont :customIcons="mItem.type" size="52"></iconsfont>
                                    <uni-badge type="error" v-if="mItem.num > 0"
                                        :customStyle="{ background: '#f43530' }" class="badge1" size="small"
                                        :text="mItem.num"></uni-badge>
                                    <text class="menu-text">{{ mItem.title }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-if="item.Widget == 'widget-order'">
                    <!-- 专属业务员 -->
                    <view class="account-main" v-if="userInfo.WorkerTel">
                        <view class="flex-between a-head">
                            <view>专属业务员</view>
                            <image src="@/static/img/yewuyuan.png"></image>
                        </view>
                        <view class="san"></view>
                        <view class="a-bottom flex-between" @click="ywycall">
                            <view class="a-bottom-left">
                                <view>{{ userInfo.WorkerName }} | {{ userInfo.WorkerTel }}</view>
                            </view>
                            <iconsfont customIcons="icon-dianhua1" color="#006EFF" size="52"></iconsfont>
                        </view>
                    </view>
                </template>
                <template v-if="item.Widget == 'widget-menulist'">
                    <!-- 必备工具 -->
                    <view class="action-list">
                        <view class="cell-normal">
                            <text class="cell-text">必备工具</text>
                        </view>
                        <view class="action-list-main">
                            <view class="action-list-item" v-for="(menuItem, menuIndex) in item.Setting.MenuList"
                                :key="menuItem.Value" @click="goUrl(menuItem.Value)">
                                <image :src="menuItem.Icon" class="icon-img"></image>
                                <view class="item-main">
                                    <text class="item-text">{{ menuItem.Name }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
            </div>
            <!--#ifdef APP-->
            <view class="bei-an" v-if="webinfo.AppIcpNo">{{ webinfo.AppIcpNo }}</view>
            <!--#endif-->
            <!--#ifndef APP-->
            <view class="bei-an" v-if="webinfo.MiniAppIcpNo">{{ webinfo.MiniAppIcpNo }}</view>
            <!--#endif-->
            <!-- <button class="btn  btn-logout btn-success-hollow" @click="logout">退出登录</button> -->
            <!-- <view class="index-page-box-mark"></view> -->
        </scroll-view>
        <uni-popup ref="popLogout" type="bottom" background-color="#fff" :safe-area="false">
            <view class="bottom-pop">
                <text class="title">确认退出当前账户?</text>
                <view class="actions">
                    <button class="btn btn-gray" @click="cancelLogout">取消</button>
                    <button class="btn btn-danger-hollow" @click="doLogout">退出</button>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="popServe" type="bottom" background-color="#fff" :safe-area="false">
            <view class="bottom-pop">
                <text class="title">切换环境</text>
                <view class="actions">
                    <button class="btn btn-gray" @click="selectServer(1)">正式</button>
                    <button class="btn btn-gray" @click="selectServer(9)">测试</button>
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="shareTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="share-box">
                <view class="name">{{ userInfo.NickName }}</view>
                <view class="qcode">
                    <view style="margin: 0 auto; width: 220px; height: 220px;">
                        <u-qrcode ref="uqrcode" canvas-id="qr" :start="start" :value="text" :size="size"></u-qrcode>
                    </view>
                </view>
                <view class="tip">请向会员展示此二维码</view>
                <image src="@/static/img/close_one.png" class="closeimg" @click="closeShareTip"></image>
            </view>
        </uni-popup>

        <pop-check-cut ref="popCheckCut" :datas="cutList" @selected="selected"></pop-check-cut>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import popCheckCut from "@/components/cutAccount/cut-account.vue"
import config from "@/config/config.js"
import { getAccountBalance, GetUserLoginList, SwitchUserLogin, GetMemberGradeInfo } from "@/service/api/member.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { getUserInfo, getProductDisplay } from "@/utils/appInit.js"
import { getUserCarList } from "@/utils/cartUtil.js"
import utilsOld from "@/utils/utilsOld.js"
import { getUserCouponDetailPage } from "@/service/api/coupon.js"
import { GetStoreId } from "@/service/api/baskOrder.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { GetIsOpenInvoice } from "@/service/api/order.js"
import authorizeUtils from "@/utils/authorizeUtils.js"
import { GetPageTemplateJson } from "@/service/api/pageTemplate.js"
export default {
    components: {
        popCheckCut,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        refresh: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (newVal) {
                    //切换tab时重置
                    this.setStatusBarStyle("light")
                    this.getInit()
                }
            },
            immediate: true,
        },
        refresh(e) {
            if (e) {
                this.getInit()
            }
        },
    },
    data() {
        return {
            config: {
                title: "个人中心",
                back: false,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            items: [
                {
                    state: "0,12",
                    type: "icon-daifukuan",
                    title: "待付款",
                    num: 0,
                },
                {
                    state: "2,13",
                    type: "icon-daifahuo",
                    title: "待发货",
                    num: 0,
                },
                {
                    state: "6",
                    type: "icon-daishouhuo",
                    title: "待收货",
                    num: 0,
                },
                {
                    state: "1",
                    type: "icon-daiqueren",
                    title: "待确认",
                    num: 0,
                },
            ],
            userInfo: {},
            webInfo: {},
            cutList: [],
            balance: 0,
            Integral: 0,
            isUsePlus: false,
            couponNum: 0,
            listHeight: "500px",
            animate: false,
            timer: null,
            marqueeheight: "",
            animateUp: false,
            listData: [],
            deliveryCode: true,
            canvansimg: "",
            openInvoice: false,
            unboxing: false,
            webinfo: {},
            start: false,
            text: '',
            size: 220,
            widgets: [], // 用户中心配置
        }
    },
    onLoad(e) { },

    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
        // todo: 获取用户中心自定义
        let path = `?pageType=6`;
        let param = {
            pageType: 6, //获取用户中心自定义
        }
        GetPageTemplateJson(param, path).then((res) => {
            this.widgets = JSON.parse(res.Data)?.WidgetList
            console.log(this.widgets)
        })
    },
    mounted() {
        this.shopName = config?.appSet?.shopName ?? '';
        this.webinfo = storage.getCache("webInfo")
    },
    methods: {
        ...mapMutations(["SET_AUTH"]),
        shareOpen() {
            let userInfo = storage.getCache("userInfo")
            let url = "https://" + config.domain + "/b2btest/#/pages/login/loading?isFromRegister=true&isScanCodeEnter=1&invitUserPhone=" + userInfo.UserName;
            console.log(url)
            this.text = url
            this.$refs.shareTip.open()
            this.start = true
        },
        closeShareTip() {
            this.$refs.shareTip.close()
        },
        goWebView() {
            this.easyGoTo("/pages/me/view")
        },
        getInit() {
            this.isUsePlus = this.getAppSet().isUsePlus
            this.userInfo = storage.getCache("userInfo")
            // if(this.userInfo.UpgradeTxt){
            // 	for (var i=0;i<4;i++)
            // 	{
            // 	    this.listData.push(this.userInfo.UpgradeTxt)
            // 	}
            // 	this.initView()
            // }
            this.webInfo = storage.getCache("webInfo")
            this.getAccountBalance()
            this.getNum()
            this.getCoupon()
            this.GetUserLoginList()
            this.getIsOpenInvoice()
            if (this.getAppSet().userCenterMenu.sunbathing) {
                this.GetStoreId()
            }

            this.$nextTick(() => {
                //获取商品高度
                getElementHeight(this, ".index-page-box", (e) => {
                    e = e - 54
                    this.listHeight = e + "px"
                })
            })
        },
        GetStoreId() {
            GetMemberGradeInfo().then((rsp) => {
                if (rsp.State == 1 && rsp.Data) {
                    if (rsp.Data.Name == '会员晒单' || rsp.Data.Name == '业务代理' || rsp.Data.Name == '超级会员' || rsp.Data.Name == '批发客户') {
                        this.unboxing = true
                    }
                }
            })
        },
        cutAccountFn() {
            this.$refs.popCheckCut.openPop()
        },
        selected(item) {
            this.loginByAccount(item)
        },
        loginByAccount(item) {
            uni.showLoading({
                title: "切换中",
            })
            let path = "?userId=" + item.UserId
            SwitchUserLogin(path).then((res) => {
                if (res.State == 1 && res.Data) {
                    this.goHome(res.Data.Token)
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        getIsOpenInvoice() {
            GetIsOpenInvoice().then((res) => {
                if (res.State == 1) {
                    this.openInvoice = res.Data == 1 ? true : false
                }
            })
        },
        goHome(token) {
            this.SET_AUTH(token)
            setTimeout((e) => {
                this.getUserInfo()
            }, 2500)
            getUserCarList()
            getProductDisplay().then((res) => { })
        },
        getUserInfo() {
            let url = "/pages/index/index"
            getUserInfo().then((res) => {
                uni.hideLoading()
                uni.reLaunch({
                    url: url,
                })
            })
        },
        //#ifdef APP
        async call() {
            let flag = await authorizeUtils.showAuthTipModal("android.permission.CALL_PHONE")
            // 用户拒绝授权
            if (!flag) return
            uni.makePhoneCall({
                phoneNumber: this.webInfo.ServiceTel,
                fail: () => {
                    // 权限开启失败提示用户手动打开权限
                    authorizeUtils.showManualAuth("android.permission.CALL_PHONE")
                }
            });

        },
        //#endif
        // #ifndef APP
        call() {
            uni.makePhoneCall({
                phoneNumber: this.webInfo.ServiceTel,
            })
        },
        //#endif
        ywycall() {
            uni.makePhoneCall({
                phoneNumber: this.userInfo.WorkerTel,
            })
        },
        getCoupon(page) {
            let param = {
                state: 0, //0 已领取待使用，有可能还没开始；1 已使用； 2未使用已过期；3已领取待使用，在有效期内；4赠送；
                privilegeWay: -1, //0 折扣券；1抵用券；2随机抵用券；3动态抵用券；-1所有
                PageIndex: 1,
                PageSize: 1,
            }

            getUserCouponDetailPage(param).then((res) => {
                if (res.Data && res.Data.Data) {
                    this.couponNum = res.Data.RecordAmout
                }
            })
        },
        GetUserLoginList() {
            let path = "?userId=" + this.userInfo.UserId
            GetUserLoginList(path).then((res) => {
                if (res.State == 1) {
                    res.Data.shift()
                    this.cutList = res.Data
                }
            })
        },
        getNum() {
            getUserInfo().then((res) => {
                this.items.forEach((e, index) => {
                    if (index == 0) {
                        e.num = res.UnpaidNum
                    } else if (index == 1) {
                        e.num = res.UnShippedNum
                    } else if (index == 2) {
                        e.num = res.UnSignNum
                    } else if (index == 3) {
                    }
                })
                this.userInfo = res
                this.$forceUpdate()
            })
        },
        getAccountBalance() {
            getAccountBalance().then((res) => {
                if (res.State) {
                    this.balance = utilsOld.add(res.Data.RechargeBalance, res.Data.SelfBalance);
                    this.Integral = res.Data.Integral
                }
            })
        },
        //客服热线
        hotline() {
            let hotLine = ""
            let webinfo = storage.getCache("webInfo")
            if (webinfo && webinfo.ServiceTel) {
                hotLine = webinfo.ServiceTel
            } else {
                hotLine = config.hotline
            }

            uni.makePhoneCall({
                phoneNumber: hotLine,
            })
        },
        //进入页面
        goUrl(url) {
            this.easyGoTo(url)
        },
        //我的订单
        goMyOrder(state) {
            storage.setCache("orderType", state)
            // this.$emit("change",'order')
            this.goOrderPage()
        },
        //退出登录
        logout() {
            this.$refs.popLogout.open()
        },
        //退出登录
        cancelLogout() {
            this.closePop()
        },
        //退出登录
        doLogout() {
            this.closePop()
            this.SET_AUTH("")
            this.SET_THEME_COLOR("")
            storage.removeCache("token")
            storage.removeCache("userInfo")
            storage.removeCache("productDisplay")
            storage.removeCache("webInfo")
            // storage.removeCache('selectShop')
            storage.removeCache("themeColor")
            this.setOffEventForCart()
            setTimeout((e) => {
                uni.reLaunch({
                    url: "/pages/login/loading",
                })
            }, 500)
        },
        //关闭提示弹窗
        closePop() {
            this.$refs.popLogout.close()
        },
        longpress() {
            this.$refs.popServe.open()
        },
        selectServer(type) {
            //1正式 0 测试
            storage.setCache("appService", type)
            this.doLogout()
        },
        goUpgrade() {
            this.goUrl("/pages_shop/packet/upgrade/index")
        },
        //去退货
        goReturn() {
            if (this.getSupplierMode() == 1) {
                //供应商目前流程一样
                //后面不一样改页面
                this.goUrl("/pages_shop/packet/return/returnGoods")
            } else {
                this.goUrl("/pages_shop/packet/return/returnGoods")
            }
        },
        //去退款
        goRefund() {
            if (this.getSupplierMode() == 1) {
                //供应商目前流程一样
                //后面不一样改页面
                this.goUrl("/pages_shop/packet/refund/index")
            } else {
                this.goUrl("/pages_shop/packet/refund/index")
            }
        },
    },
}
</script>

<style lang="scss" scoped>
page {
    background: #f7f7f7;
}

.pure-top {
    width: 100%;
    height: 300rpx;
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin-top: -2rpx;

    &:after {
        content: "";
        width: 160%;
        height: 300rpx;
        position: absolute;
        left: -30%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}

.main {
    margin-top: -300rpx;
    position: relative;
    z-index: 1;

    .account-info {
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 1;
        padding: $app-page-padding $app-page-padding $app-page-padding 40rpx;
        align-items: center;

        .account-info-avatar {
            margin-right: $app-page-padding;
            position: relative;

            .avatar-img {
                width: 124rpx;
                height: 124rpx;
                border: 2rpx solid rgba($color-white, 0.8);
                box-shadow: 0 3rpx 8rpx 0rpx rgba(25, 27, 34, 0.2);
                border-radius: 50%;
            }

            .btn-edit {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 40rpx;
                height: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background: $color-yellow-5;
                border-radius: 100rpx;
            }
        }

        .account-info-user {
            display: flex;
            flex-direction: column;

            text {
                color: $color-white;
            }

            .account-info-user-top {
                display: flex;
                flex-direction: row;
                position: relative;
            }

            .user-name {
                font-size: $font-size-34;
                font-weight: 700;
                margin-bottom: 8rpx;
                margin-right: 8rpx;
                width: 400rpx;
            }

            .user-location {
                font-size: $font-size-24;
            }
        }
    }

    .balance {
        height: 100rpx;
        margin: 0 $app-page-padding 25rpx;
        padding: $app-page-padding;
        background: $color-white;
        border-radius: $border-radius-10;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .balance-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-items: center;
            align-items: center;

            .value {
                font-weight: 700;
                color: $app-color-text-mian;
                font-size: $font-size-40;
                margin-bottom: 10rpx;
            }

            .label {
                color: $app-color-text-tip;
                font-size: $font-size-24;
            }
        }

        .coupon {
            .value {
                color: $app-color-main;
            }
        }
    }
}

.cell-normal {
    height: 80rpx;
    display: flex;
    flex-direction: row;
    padding: 0 $app-page-padding;
    align-items: center;
    margin-bottom: 10rpx;

    .cell-text {
        display: flex;
        flex: 1;
        align-items: center;
        font-size: $font-size-28;
        font-weight: 600;
    }
}

.nav {
    background: $color-white;
    margin: 0 $app-page-padding 20rpx $app-page-padding;
    display: flex;
    flex-direction: column;
    border-radius: 8rpx;

    .menu-items {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        margin-top: 22rpx;

        .menu {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .menu-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;

                .badge1 {
                    position: absolute;
                    right: -20rpx;
                    top: -15rpx;
                }
            }

            .menu-icon {
                margin-bottom: 15rpx;
            }

            .menu-text {
                margin-top: 10rpx;
            }
        }
    }
}

.action-list {
    border-radius: 8rpx;
    background: $color-white;
    margin: 0 24rpx 20rpx 24rpx;

    .action-list-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .action-list-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 45rpx;

        .icon-img {
            width: 56rpx;
            height: 56rpx;
            display: block;
            margin-bottom: 12rpx;
        }

        .icon {
            height: 44rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 16rpx;

            .icon-left {
                display: flex;
            }
        }

        .item-main {
            display: flex;
            flex: 1;
            flex-direction: row;
            align-items: center;

            .item-text {
                font-size: $font-size-24;
                color: $color-black;
                // font-weight: bold;
            }
        }
    }
}

.action-list .icon-right .uni-icons {
    color: #ccc;
}

.icon_edit {
    position: absolute;
    right: $app-page-padding;
    top: $app-page-padding;
}

.icon-account {
    right: $app-page-padding * 4;
}

.btn-logout {
    height: 80rpx;
    margin: 40rpx;
    font-size: 32rpx;
}

.vip {
    margin: 20rpx $app-page-padding 0;
    display: flex;
    flex: 1;
    height: 96rpx;
    background: #2a2a2a;
    border-radius: 16rpx 16rpx 0 0;
    position: relative;
    box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.3);

    .bg {
        position: absolute;
        left: 0;
        right: 0;
        height: 56px;
        background: linear-gradient(180deg, rgba(255, 247, 226, 0.01) 0%, rgba(247, 227, 179, 0.3) 100%);
        z-index: 0;
    }

    .vip-main {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 20rpx 10rpx;
        flex: 1;

        .vip-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
        }

        text {
            color: #eed9a4;
        }

        .vip-tip-text {
            display: flex;
            flex: 1;
        }

        .right-icon {
            margin-bottom: 2rpx;
            margin-left: 6rpx;
        }
    }
}

.plus-container {
    .pure-top {
        height: 400rpx;

        &:after {
            height: 400rpx;
        }
    }

    .main {
        margin-top: -400rpx;
    }

    .balance {
        margin: -16rpx $app-page-padding 25rpx;
        position: relative;
        z-index: 1;
    }
}

.btn-clear {
    border: none;
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;

    &:after {
        border: none;
    }
}

.cut-account {
    position: absolute;
    right: 24rpx;
    top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 48rpx;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 24rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20rpx);

    .cut-account-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
        display: flex;
    }

    .cut-account-text {
        font-size: $font-size-24;
        color: $color-white;
    }
}

.account-main {
    margin: 0 24rpx 24rpx 24rpx;
    position: relative;

    .a-head {
        background: #434c67;
        height: 80rpx;
        border-radius: 24rpx 24rpx 0 0;
        padding: 0 32rpx 0 24rpx;
        font-size: 28rpx;
        color: #ffffff;

        image {
            width: 72rpx;
            height: 72rpx;
            position: relative;
            bottom: -4rpx;
        }
    }

    .san {
        position: absolute;
        top: 80rpx;
        left: 50%;
        margin-left: -18rpx;
        border-left: 18rpx solid transparent;
        border-right: 18rpx solid transparent;
        border-top: 12rpx solid #434c67;
        width: 0;
        height: 0;
    }

    .a-bottom {
        height: 120rpx;
        background: #ffffff;
        border-radius: 0 0 24rpx 24rpx;
        padding: 0 32rpx 0 24rpx;

        .a-bottom-left {
            font-size: 32rpx;
            color: #333;
            display: flex;
            align-items: center;

            image {
                width: 88rpx;
                height: 88rpx;
                margin-right: 20rpx;
            }
        }
    }
}

.membership {
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(20, 39, 58, 0.2);
    border-radius: 66rpx;
    width: 702rpx;
    height: 132rpx;
    margin: 0 $app-page-padding 25rpx;
    background: linear-gradient(131deg, #0b2842 0%, #1d2833 100%);
    color: #f7e5cd;
    align-items: center;
    position: relative;

    .membershipbg {
        width: 702rpx;
        height: 132rpx;
    }

    .membership_main {
        position: relative;
        display: flex;
        margin-top: -132rpx;
        justify-content: space-between;
        align-items: center;
        padding: 22rpx $app-page-padding 22rpx 38rpx;

        image {
            width: 62rpx;
            height: 40rpx;
        }

        .membership_left {
            font-size: 24rpx;
        }

        .main_name {
            font-size: 32rpx;
            color: #f7e5cd;
            padding-left: 12rpx;
        }

        .main-desc {
            padding-top: 10rpx;
        }

        .membership_right {
            width: 164rpx;
            height: 58rpx;
            background: linear-gradient(90deg, #faebd3 0%, #dba98b 100%);
            box-shadow: 0px 4rpx 12rpx 0px #08121d;
            border-radius: 29rpx;
            display: flex;
            justify-content: center;
            font-size: 24rpx;
            color: #562a0f;
            align-items: center;
            animation: myBreath 1s linear infinite;

            .button-go {
                width: 20rpx;
                height: 20rpx;
                background: #562a0f;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 12rpx;

                view {
                    width: 0px;
                    height: 0px;
                    /* border是240px则三角形底边长为480px  */
                    border: 8rpx solid;
                    border-left-color: #ffffff;
                    border-right-color: transparent;
                    border-top-color: transparent;
                    border-bottom-color: transparent;
                    margin-left: 12rpx;
                }
            }
        }

        @keyframes myBreath {
            0% {
                transform: scale(0.88);
            }

            50% {
                transform: scale(100%);
            }

            100% {
                transform: scale(0.88);
            }
        }
    }
}

.marquee-list {
    view {
        height: 44rpx;
    }

    text {
        display: block;
        width: 100%;
        height: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        list-style: none;
        line-height: 44rpx;
        font-size: $font-size-28;
    }
}

.animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-44rpx);
}

.vip-lv-box {
    margin-left: 0;
}

.share-box {
    width: 300px;
    border-radius: 40rpx;
    background: #F1270C;

    .name {
        font-size: 42rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        padding: 50rpx 0;
    }

    .qcode {
        width: 270px;
        height: 270px;
        box-sizing: border-box;
        padding-top: 25px;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 0 auto;
    }

    .tip {
        font-size: 28rpx;
        color: #ffffff;
        text-align: center;
        padding: 50rpx 0;
    }
}

.closeimg {
    width: 64rpx;
    height: 64rpx;
    position: absolute;
    bottom: -96rpx;
    left: 50%;
    margin-left: -32rpx;
}
</style>
